<template>
  <div id="girls">
    <div class="iconName">
        <span>
            <img :src="IconImg" alt="">
        </span>
        <span>{{GoodName}}</span>
    </div>
    <ul>
        <li v-for="(item,key) in comicslist" :key="key">
            <div class="comic">
                <img :src=item.extension|formImg alt="">
                <p>{{item.bigbook_name}}</p>
                <p>{{item.extension|formatData}}</p>                               
            </div>
        </li>
    </ul>
  </div>
</template>
<script>
export default {
    data(){
        return{
            GoodName:'',
            IconImg:'',
            comicslist:[],           
        }
    },
    created(){
        var _this = this;
        this.$http.get(this.$baseUrl+'/api/home').then(function(response){
            if(response.data){
                _this.GoodName =  response.data.info[5].name;
                console.log(_this.GoodName);
                _this.IconImg = response.data.info[5].icon;
                // console.log(_this.IconImg);
                _this.comicslist = response.data.info[5].comicslist;
                // console.log(_this.comicslist);
            }
        }).catch(function(error){
            console.log(error);
        })
    },
    filters:{
        //过滤器获取漫画简介
        formatData(value){
            value = JSON.parse(value);  
            // console.log(value.recommendwords);
            var recCommend = value.recommendwords;
            return recCommend;
        },
        formImg(value){
            value = JSON.parse(value);
            var SCFK = value.scfk344_202;
            // console.log(SCFK);
            return SCFK;
        }
    },
}
</script>
<style lang="scss" scoped>
    #girls{
        width: 100%;
        height: auto;
        background:#f5f3f3;
        padding-top: 10px;
        .iconName{
            width: 100%;
            height: 40px;
            padding-top:20px;
            background: #fff;
            span:nth-child(1){
            float: left;
                img{
                    width: 60%;
                    height:auto;
                    margin-left: 6px;
                }
            }
            span:nth-child(2){
                line-height: 30px;
                color:#CC0000;
                font-size: 18px;
                font-weight: bolder;
            }
        }
        ul{
            width: 100%;
            height:100%; 
            
            // flex-wrap: wrap;          
            li{ 
                display: flex;         
                list-style: none;
                text-align: center;                  
                 flex-direction: row;
                 width: 100%;                  
                .comic{
                    box-sizing:border-box; 
                    width: 100%;
                    height: 100%; 
                    background: #ffffff;
                    display: flex;  
                    flex-wrap: wrap;
                    img{                       
                        width: 100%;
                        height: 100%;
                        margin-bottom: 20px;                                      
                    }
                    p{
                        display: flex;
                        width: 100%;
                        height: 20px;

                    }
                    p:nth-child(3){
                        color:#adabab;  
                    }
                }
            }
        }
    }
</style>
